<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>受控组件</title>
    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/prop-types.js"></script>
    <script src="../react/babel.min.js"></script>
    <link rel="stylesheet" href="css/docUI.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    class MyForm extends React.Component {
        constructor (props) {
            super(props)
            this.InputHandler = this.InputHandler.bind(this)
        }

        state = {
            val: 0
        }

        InputHandler (e) {
            this.setState({
                val: e.target.value
            })
        }

        render () {
            let { val } = this.state
            return (
                <form>
                    <div className="doc-input">
                        <input type="text" value={val} onInput={this.InputHandler} placeholder="请输入内容"/>
                    </div>
                    <h1>{val}</h1>
                </form>
            )
        }
    }

    ReactDOM.render(<MyForm></MyForm>, document.getElementById('root'))
</script>
</body>
</html>
